<template>
  <div class="main">
    <p class="main_text">车辆资料下载</p>
    <!-- ############################################## 查询 ############################################## -->
    <div class="top mb20">
      <el-form :model="searchData" class="df fww">
        <el-form-item label="车牌号：" style="width: 20%">
          <el-input v-model="searchData.carId" placeholder="车牌号" class="mr20" />
        </el-form-item>
        <el-form-item label="车辆类型：" style="width: 20%">
          <el-input v-model="searchData.carType" placeholder="车辆类型" class="mr20" />
        </el-form-item>
        <el-form-item label="车辆品牌：" style="width: 20%">
          <el-input v-model="searchData.brand" placeholder="车辆品牌" class="mr20" />
        </el-form-item>
        <el-form-item label="是否过磅：" style="width: 20%">
          <el-select v-model="searchData.ifWeight" placeholder="是否过磅" class="mr20">
            <el-option label="是" value="true" />
            <el-option label="否" value="false" />
          </el-select>
        </el-form-item>
        <el-form-item label="是否预处理：" style="width: 20%">
          <el-select v-model="searchData.pretreated" placeholder="是否预处理" class="mr20">
            <el-option label="是" value="true" />
            <el-option label="否" value="false" />
          </el-select>
        </el-form-item>
        <el-form-item label="是否监销：" style="width: 20%">
          <el-select v-model="searchData.ifMonitor" placeholder="是否监销" class="mr20">
            <el-option label="监销" value="true" />
            <el-option label="不监销" value="false" />
          </el-select>
        </el-form-item>
        <el-form-item label="是否已生成拆解单：" style="width: 30%">
          <el-select v-model="searchData.haveSheet" placeholder="是否已生成拆解单" class="mr20">
            <el-option label="已生成" value="true" />
            <el-option label="未生成" value="false" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <div class="df">
            <el-button type="primary" @click="searchDataBtn">查询</el-button>
            <el-button type="primary" plain @click="resc">重置</el-button>
          </div>
        </el-form-item>
      </el-form>
    </div>
    <!-- ############################################## 表单 ############################################## -->
    <div class="cyr-flex">
      <el-table :data="tableData" :header-cell-style="{ background: '#f0f6fe' }" border v-adaptive
        :show-overflow-tooltip="true">
        <!-- <el-table-column type="selection" width="50" /> -->
        <el-table-column label="编号" prop="id" width="60" />
        <el-table-column label="车牌号" prop="carInfo.value.号牌号码">
          <template #default="props">
            <el-text tag="span" style='cursor: pointer;' @click="check(props.row)">{{ props.row.carInfo.value.号牌号码
              }}</el-text>
          </template>
        </el-table-column>
        <el-table-column label="车辆类型" prop="carInfo.value.车辆类型" min-width="90" />
        <el-table-column label="车辆品牌" prop="carInfo.value.品牌型号" min-width="90" />
        <el-table-column label="车辆颜色" prop="color" min-width="90" />
        <el-table-column label="是否监销" min-width="100">
          <template #default="props">
            <el-text v-if="props.row.ifMonitor == true">监销</el-text>
            <el-text v-else>不监销</el-text>
          </template>
        </el-table-column>
        <el-table-column label="入场编号" prop="incomeId" min-width="90" />
        <el-table-column label="入库时间" prop="createdAt" min-width="90" />
        <el-table-column label="是否过磅" min-width="90">
          <template #default="props">
            <el-tag v-if="props.row.ifWeight == true" type="success">已过磅</el-tag>
            <el-tag v-else type="info">未过磅</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="是否预处理" min-width="100">
          <template #default="props">
            <el-tag v-if="props.row.pretreatment == true" type="success">已预处理</el-tag>
            <el-tag v-else type="info">未预处理</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="是否生成拆解单" min-width="130">
          <template #default="props">
            <el-tag v-if="props.row.haveSheet == true" type="success">已生成</el-tag>
            <el-tag v-else type="info">未生成</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" fixed="right" width="120" :show-overflow-tooltip="false">
          <template #default="props">
            <el-button size="small" link type="primary" @click="check(props.row)" v-if='roleList.read'>查看下载</el-button>
            <el-button size="small" link type="primary" v-if='roleList.write'
              @click="handleChange(props.row)">修改</el-button>
            <!-- <el-button size="small" link type="primary" @click="dataComplete(props.row)">资料补全</el-button> -->
          </template>
        </el-table-column>
        <!-- #################################### 分页 #################################### -->
      </el-table>
      <smartPager v-model:current-page="currentPage" v-model:page-size="pageSize" :total="total"
        @change="handleCurrentChange" />
    </div>
    <!-- ############################################## 蒙层 ############################################## -->
    <el-dialog v-model="seeCenterDialogVisible" width="40%" align-center @close="closeDia">
      <template #header>
        <div class="df aic">
          <el-icon style="color: #fff" size="20">
            <Edit />
          </el-icon>&nbsp;
          <p style="color: #fff">资料查看（点击图片下载）</p>
        </div>
      </template>
      <el-steps style="max-width: 100%" :active="activeStep" align-center class="mb20">
        <el-step title="待过磅" />
        <el-step title="待生成拆解单" />
        <el-step title="待预处理" />
        <el-step title="未拆解" />
        <el-step title="拆解中" />
        <el-step title="待上传两证" />
        <el-step title="已完成" />
      </el-steps>
      <el-form :model="checkData" label-width="140" class="df fww ais">
        <el-form-item label="号牌号码：" style="width: 48%">
          <el-text>{{ checkData.carInfo.value.号牌号码 }}</el-text>
        </el-form-item>
        <el-form-item label="品牌型号：" style="width: 48%">
          <el-text>{{ checkData.carInfo.value.品牌型号 }}</el-text>
        </el-form-item>
        <el-form-item label="整备质量：" style="width: 48%">
          <el-text>{{ checkData.carInfo.value.整备质量 }}</el-text>
        </el-form-item>
        <el-form-item label="核定载人数：" style="width: 48%">
          <el-text>{{ checkData.carInfo.value.核定载人数 }}</el-text>
        </el-form-item>
        <el-form-item label="车辆识别代码：" style="width: 48%">
          <el-text>{{ checkData.carInfo.value.车辆识别代号 }}</el-text>
        </el-form-item>
        <el-form-item label="车辆类型：" style="width: 48%">
          <el-text>{{ checkData.carInfo.value.车辆类型 }}</el-text>
        </el-form-item>
        <el-form-item label="车辆颜色：" style="width: 48%">
          <el-text>{{ checkData.color }}</el-text>
        </el-form-item>
        <el-form-item label="入场编号：" style="width: 48%">
          <el-text>{{ checkData.incomeId }}</el-text>
        </el-form-item>
        <el-form-item label="发动机号：" style="width: 48%">
          <el-text>{{ checkData.carInfo.value.发动机号码 }}</el-text>
        </el-form-item>
        <el-form-item label="入场时间：" style="width: 48%">
          <el-text>{{ checkData.createdAt }}</el-text>
        </el-form-item>
        <el-form-item label="车辆图片：" style="width: 48%" v-if="carImgArr.length != 0">
          <img class="carImg" v-for="item in carImgArr" :key="item.id" :src="item.url" alt=""
            @click="previewCarImg(item.url)" />
        </el-form-item>
        <el-form-item label="拆解后图片：" style="width: 48%" v-if="afterDismantlingImgArr.length != 0">
          <img class="carImg" v-for="item in afterDismantlingImgArr" :key="item.id" :src="item.url" alt=""
            @click="previewCarImg(item.url)" />
        </el-form-item>
        <el-form-item label="行驶证：" style="width: 48%" v-if="drivingLicenseimgArr.length != 0">
          <img class="carImg" v-for="item in drivingLicenseimgArr" :key="item.id" :src="item.url" alt=""
            @click="previewCarImg(item.url)" />
        </el-form-item>
        <el-form-item label="营业执照：" style="width: 48%" v-if="businessLicenseimgArr.length != 0">
          <img class="carImg" v-for="item in businessLicenseimgArr" :key="item.id" :src="item.url" alt=""
            @click="previewCarImg(item.url)" />
        </el-form-item>
        <el-form-item label="车主身份证：" style="width: 48%" v-if="ownerImgArr.length != 0">
          <img class="carImg" v-for="item in ownerImgArr" :key="item.id" :src="item.url" alt=""
            @click="previewCarImg(item.url)" />
        </el-form-item>
        <el-form-item label="代理人身份证：" style="width: 48%" v-if="agentImgArr.length != 0">
          <img class="carImg" v-for="item in agentImgArr" :key="item.id" :src="item.url" alt=""
            @click="previewCarImg(item.url)" />
        </el-form-item>
        <el-form-item label="委托书：" style="width: 48%" v-if="PowerOfAttorneyImgArr.length != 0">
          <img class="carImg" v-for="item in PowerOfAttorneyImgArr" :key="item.id" :src="item.url" alt=""
            @click="previewCarImg(item.url)" />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="seeCenterDialogVisible = false">取消</el-button>
        </span>
      </template>
    </el-dialog>
    <el-dialog v-model="dialogVisibleImg" align-center width="70%">
      <template #header>
        <div class="df aic">
          <el-icon style="color: #fff" size="20">
            <Edit />
          </el-icon>&nbsp;
          <p style="color: #fff">图片</p>
        </div>
      </template>
      <div style="height: 70vh; width: 100%; background-color: #fff; overflow-y: scroll">
        <img style="width: 100%" :src="ImgdialogImageUrl" alt="" />
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button type="primary" @click="DownloadFile">资料下载</el-button>
        </span>
      </template>
    </el-dialog>
    <!-- ****************************** 车辆录入 ****************************** -->
    <el-drawer v-model="changeDrawer" :with-header="false" size="40%">
      <span style="font-size: 1.25rem; color: #3d3d3d; font-weight: bold">上传信息（商务部）</span>
      <!--******************* 基本信息 *******************-->
      <div class="part mt20">
        <p style="color: #1d2129">车主信息</p>
      </div>
      <el-form :model="drawerForm" ref="ruleFormRef" :rules="drawerRules" label-position="top" class="df jcsb fww mt20">
        <el-form-item label="车主姓名/公司名" style="width: 48%" prop="ownerName">
          <el-input v-model="drawerForm.ownerName" class="input-with-select">
            <template #prepend>
              <el-select v-model="drawerForm.ownerType" style="width: 100px">
                <el-option label="车主姓名" value="0" />
                <el-option label="企业名称" value="1" />
              </el-select>
            </template>
          </el-input>
        </el-form-item>
        <el-form-item label="身份证/营业执照" style="width: 48%" prop="idCard">
          <el-input v-model="drawerForm.idCard" class="input-with-select">
            <template #prepend>
              <el-select v-model="drawerForm.idCardType" placeholder="Select" style="width: 100px"
                :placement="'bottom'">
                <el-option label="身份证" value="0" />
                <el-option label="其他证件（如护照、港澳通行证、台湾居民来往内地通行证、外交官证、军官证等）" value="1" />
              </el-select>
            </template>
          </el-input>
        </el-form-item>
        <el-form-item label="联系电话" style="width: 48%" prop="ownerPhone">
          <el-input v-model="drawerForm.ownerPhone" />
        </el-form-item>
        <el-form-item label="邮政编码" style="width: 48%">
          <el-input v-model="drawerForm.addressCode" disabled />
        </el-form-item>
        <el-form-item label="联系地址" style="width: 100%" prop="companyAddress">
          <el-input v-model="drawerForm.companyAddress" />
        </el-form-item>
        <template v-if="drawerForm.ownerType === '1'">
          <div class="part mt20 mb20">
            <p style="color: #1d2129">经办人信息</p>
          </div>
          <el-form-item label="经办人姓名" style="width: 48%" prop="">
            <el-input v-model="drawerForm.operator" />
          </el-form-item>
          <el-form-item label="身份证" style="width: 48%" prop="">
            <el-input v-model="drawerForm.operatorIdCard" />
          </el-form-item>
        </template>
        <div class="part mt20 mb20">
          <p style="color: #1d2129">车辆信息</p>
        </div>
        <el-form-item label="车辆识别代号（VIN码）" style="width: 48%" prop="carVin">
          <el-input v-model="drawerForm.carVin" disabled />
        </el-form-item>
        <el-form-item label="牌照号码" style="width: 48%" prop="licensePlate">
          <el-input v-model="drawerForm.licensePlate" />
        </el-form-item>
        <el-form-item label="车辆识别代号（确认）" style="width: 48%" prop="confirmVin">
          <el-input v-model="drawerForm.confirmVin" disabled />
        </el-form-item>
        <el-form-item label="动力类别" style="width: 48%" prop="usePowerCategory">
          <el-select v-model="drawerForm.usePowerCategory" placeholder="请选择动力类别" :placement="'bottom'"
            @change="handlePowerCategory">
            <el-option v-for="item in powerCategory" :key="item.value" :label="item.name" :value="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="车辆类型" style="width: 48%" prop="dealCarType">
          <el-input v-model="drawerForm.dealCarType" disabled />
        </el-form-item>
        <el-form-item label="使用性质" style="width: 48%" prop="useNature">
          <el-select v-model="drawerForm.useNature" placeholder="请选择使用性质" :placement="'bottom'"
            @change="handleSeChange">
            <el-option v-for="item in natureList" :key="item.value" :label="item.name" :value="item.value" />
          </el-select>
        </el-form-item>
        <!-- <el-form-item label="品牌车型" style="width: 48%">
          <el-input v-model="drawerForm.brandType" />
        </el-form-item> -->
        <el-form-item label="车辆品牌" style="width: 48%" prop="brand">
          <el-input v-model="drawerForm.brand" />
        </el-form-item>
        <el-form-item label="车辆型号" style="width: 48%" prop="dealCarSeriaName">
          <el-input v-model="drawerForm.dealCarSeriaName" />
        </el-form-item>
        <el-form-item label="发动机编号" style="width: 48%" prop="dealCarEngineCode">
          <el-input v-model="drawerForm.dealCarEngineCode" />
        </el-form-item>
        <!-- <el-form-item label="发动机型号" style="width: 48%" prop="dealCarEngineName">
          <el-input v-model="drawerForm.dealCarEngineName" disabled />
        </el-form-item>
        <el-form-item label="变速器型号" style="width: 48%" prop="dealCarTransmissionName">
          <el-input v-model="drawerForm.dealCarTransmissionName" disabled />
        </el-form-item> -->
        <el-form-item label="注册登记日期" style="width: 48%" prop="dealCarVehicleLicenseDate">
          <!-- <el-input v-model="drawerForm.dealCarVehicleLicenseDate" /> -->
          <el-date-picker v-model="drawerForm.dealCarVehicleLicenseDate" type="date" style="width: 100%;"
            value-format="YYYY-MM-DD" />
        </el-form-item>
        <el-form-item label="核定载客数" style="width: 48%" prop="dealCarPassengerCount">
          <el-input v-model="drawerForm.dealCarPassengerCount" />
        </el-form-item>
        <!-- <el-form-item label="排量/功率" style="width: 48%" prop="efficiency">
          <el-input v-model="drawerForm.efficiency" />
        </el-form-item> -->
        <el-form-item label="整备质量" style="width: 48%" prop="dealCarTotalWeight">
          <el-input v-model="drawerForm.dealCarTotalWeight" />
        </el-form-item>
        <el-form-item label="总里程数" style="width: 48%" prop="mileage">
          <el-input v-model="drawerForm.mileage" />
        </el-form-item>
        <el-form-item label="外轮廓尺寸" prop="号牌号码">
          <div style="display: flex;">
            <el-input v-model="drawerForm.long" style="padding-right:10px ;">
              <template #prepend>
                长
              </template>
              <template #append>mm</template>
            </el-input>
            <el-input v-model="drawerForm.wide" style="padding-right:10px ;">
              <template #prepend>
                宽
              </template>
              <template #append>mm</template>
            </el-input>
            <el-input v-model="drawerForm.height" style="padding-right:10px ;">
              <template #prepend>
                高
              </template>
              <template #append>mm</template>
            </el-input>
          </div>
        </el-form-item>
        <el-form-item label="是否有动力电池" style="width: 48%;display: flex; align-items: center;" prop="号牌号码">
          <el-radio-group v-model="drawerForm.dealCarIsNewenergy">
            <el-radio label="false">否</el-radio>
            <el-radio label="true">是</el-radio>
          </el-radio-group>
        </el-form-item>
        <!-- <div class="part mt20 mb20">
          <p style="color: #1d2129">拆解前照片</p>
        </div> -->

        <!-- <div class="part mt20 mb20">
          <p style="color: #1d2129">五大总成齐备情况</p>
        </div> -->
        <!-- <el-form-item label="五大总成齐备情况" prop="号牌号码" style="display: flex; align-items: center;">
          <el-radio-group v-model="drawerForm.isdealCarIsNewenergy">
            <el-radio value="0">车架</el-radio>
            <el-radio value="1">发动机</el-radio>
            <el-radio value="0">变速器</el-radio>
            <el-radio value="1">前后桥</el-radio>
            <el-radio value="0">方向机</el-radio>
          </el-radio-group>
        </el-form-item> -->
      </el-form>
      <template #footer>
        <el-button type="primary" plain @click="changeDrawer = false">取消</el-button>
        <el-button type="primary" @click="handleSave">保存</el-button>
      </template>
    </el-drawer>
  </div>
</template>

<script setup lang="ts">
import { ref, toRef, watch } from 'vue';
import { Edit, } from "@element-plus/icons-vue";
import {
  RequestScrapCarGetlistlimit,
  RequestCompaniesList,
  RequestEmployeeGetFunctionAuthorize,
  RequestScrapCarGetCarStatus,
  RequestVehicleInput
} from "@/api/path/index.js";
import { formatTime } from "@/filters/index";
import { ElMessage } from "element-plus";
/*------------------------------------- 按钮权限 -------------------------------------*/
import useAuthorize from "@/hooks/authorize";
import { he, tr } from "element-plus/es/locale";
let roleList = useAuthorize()
console.log(roleList.value)
// import { useRouter } from "vue-router";
// const authorizeFlag = ref<any>();
const dialogVisibleImg = ref<any>(false);
const ImgdialogImageUrl = ref<any>("");
const drawer = ref<any>(false)
const previewCarImg = (e: any) => {
  dialogVisibleImg.value = true;
  ImgdialogImageUrl.value = e;
};
// const btnAuthority = () => {
//   // console.log(' useRouter()', useRouter().currentRoute.value.meta.title);
//   RequestEmployeeGetFunctionAuthorize(useRouter().currentRoute.value.meta.title).then(
//     (res: any) => {
//       // console.log(res.resultObj);
//       if (res.resultObj == "W") {
//         authorizeFlag.value = false;
//       } else {
//         authorizeFlag.value = true;
//       }
//     }
//   );
// };
// btnAuthority();
/*************************************** 查询 ***************************************/
const searchData = ref<any>({
  carId: "",
  carType: "",
  brand: "",
  ifWeight: "",
  pretreated: "",
  ifMonitor: "",
  haveSheet: "",
});
const searchDataBtn = () => {
  RequestScrapCarGetlistlimit({
    page: currentPage.value,
    rows: pageSize.value,
    carId: searchData.value.carId,
    carType: searchData.value.carType,
    brand: searchData.value.brand,
    ifWeight: searchData.value.ifWeight,
    pretreated: searchData.value.pretreated,
    ifMonitor: searchData.value.ifMonitor,
    haveSheet: searchData.value.haveSheet,
  }).then((res: any) => {
    res.resultObj.data.forEach((item: any) => {
      item.carInfo.value = JSON.parse(item.carInfo.value);
      item.createdAt = formatTime(item.createdAt);
    });
    tableData.value = res.resultObj.data;
    total.value = res.resultObj.total;
  });
};
/*************************************** 重置 ***************************************/
const resc = () => {
  (searchData.value.carId = ""),
    (searchData.value.carType = ""),
    (searchData.value.brand = ""),
    (searchData.value.ifWeight = ""),
    (searchData.value.pretreated = ""),
    (searchData.value.ifMonitor = ""),
    (searchData.value.haveSheet = ""),
    getData();
};
const tableData = ref<any>([]);
const seeCenterDialogVisible = ref<any>(false);
/* 分页器 */
const handleSizeChange = (val: number) => {
  console.log(`${val} items per page`);
  // getData()
  searchDataBtn();
};
const handleCurrentChange = (val: number) => {
  console.log(`current page: ${val}`);
  // getData()
  searchDataBtn();
};
/* ************* 获取列表数据 ************* */
const total = ref<any>(1);
const currentPage = ref(1);
const pageSize = ref(10);
const getData = () => {
  RequestScrapCarGetlistlimit({
    page: currentPage.value,
    rows: pageSize.value,
  }).then((res: any) => {
    res.resultObj.data.forEach((item: any) => {
      item.carInfo.value = JSON.parse(item.carInfo.value);
      item.createdAt = formatTime(item.createdAt);
    });
    tableData.value = res.resultObj.data;
    total.value = res.resultObj.total;
  });
};

/* ************* 查看 ************* */
const activeStep = ref(1);
const checkData = ref();
const carImgArr = ref<Array>([]); //车辆图片
const afterDismantlingImgArr = ref<Array>([]); //拆解后的照片
const drivingLicenseimgArr = ref<Array>([]); //行驶证
const businessLicenseimgArr = ref<Array>([]); //营业执照
const ownerImgArr = ref<Array>([]); //车主身份证
const agentImgArr = ref<Array>([]); //代理人身份证
const PowerOfAttorneyImgArr = ref<Array>([]); //委托书
const check = (row: any) => {
  seeCenterDialogVisible.value = true;
  RequestScrapCarGetCarStatus(row.id).then((res: any) => {
    activeStep.value = res.resultObj;
  });
  checkData.value = row;
  console.log(checkData.value);
  checkData.value.imgs.forEach((item: any) => {
    if (item.imageType == null) {
      carImgArr.value.push(item);
    } else if (item.imageType == 3) {
      afterDismantlingImgArr.value.push(item);
    } else if (item.imageType == 8) {
      drivingLicenseimgArr.value.push(item);
    } else if (item.imageType == 7) {
      businessLicenseimgArr.value.push(item);
    } else if (item.imageType == 4) {
      ownerImgArr.value.push(item);
    } else if (item.imageType == 5) {
      agentImgArr.value.push(item);
    } else if (item.imageType == 6) {
      PowerOfAttorneyImgArr.value.push(item);
    }
  });
  console.log("PowerOfAttorneyImgArr.value", PowerOfAttorneyImgArr.value);
};
const closeDia = () => {
  setTimeout(() => {
    carImgArr.value = [];
    afterDismantlingImgArr.value = [];
    drivingLicenseimgArr.value = [];
    businessLicenseimgArr.value = [];
    ownerImgArr.value = [];
    agentImgArr.value = [];
    PowerOfAttorneyImgArr.value = [];
  }, 200);
};
getData();
/********************************** 下载 **********************************/
const DownloadFile = () => {
  const link = document.createElement("a");
  link.href = ImgdialogImageUrl.value;
  link.click();
  ElMessage.success("下载成功");
};


/*-------------------------------------- 资料补全 --------------------------------------*/

const dataComplete = (event: any) => {
  console.log(event)
  drawer.value = true

}
const changeDrawer = ref<boolean>(false)
const drawerForm = ref({
  ownerName: '',
  ownerType: '0',
  idCard: '',
  idCardType: '0',
  ownerPhone: '',
  addressCode: '',
  //公司地址
  companyAddress: '',
  //经办人 idCar
  operator: '',
  operatorIdCard: '',
  //牌照
  licensePlate: '',
  // 车架号
  carVin: '',
  confirmVin: '',
  //车辆类型
  dealCarType: '',
  // 使用性质
  useNature: '',
  //动力类型
  usePowerCategory: '',
  brand: '',
  //品牌车型
  brandType: '',
  //车辆型号
  dealCarSeriaName: '',
  //发动机型号
  dealCarEngineName: '',
  //发动起编号
  dealCarEngineCode: '',
  //变速器型号
  dealCarTransmissionName: '',
  //注册登记日期
  dealCarVehicleLicenseDate: '',
  //核定载客数
  dealCarPassengerCount: '',
  //排量功率  
  efficiency: '',
  //整备质量
  dealCarTotalWeight: '',
  //总里程数
  mileage: '',
  //是否有动力池
  dealCarIsNewenergy: "false",
  isDealCarIsNewenergy: {},
  //外观尺寸
  dealCarFrontSize: '',
  //长
  long: '',
  wide: '',
  height: ''
})
const changeItemId = ref()
const handleChange = (item: any) => {
  changeDrawer.value = true
  changeItemId.value = item.id
  let { carInfo } = item
  drawerForm.value.ownerName = carInfo.value['所有人']
  drawerForm.value.idCard = carInfo.value['身份证号码']
  drawerForm.value.ownerPhone = item.phone
  drawerForm.value.addressCode = item.addressCode
  drawerForm.value.companyAddress = carInfo.value['住址']
  drawerForm.value.carVin = carInfo.value['车辆识别代号']
  drawerForm.value.licensePlate = carInfo.value['号牌号码']
  drawerForm.value.confirmVin = carInfo.value['车辆识别代号']
  drawerForm.value.usePowerCategory = carInfo.value['动力类型Val']
  drawerForm.value.dealCarType = carInfo.value['车辆类型']
  drawerForm.value.useNature = carInfo.value['使用性质Val']
  drawerForm.value.dealCarSeriaName = carInfo.value.型号 ? carInfo.value.型号 : carInfo.value.品牌型号
  drawerForm.value.brand = carInfo.value.品牌 ? carInfo.value.品牌 : carInfo.value.品牌型号
  drawerForm.value.brandType = carInfo.value['品牌型号']
  drawerForm.value.dealCarVehicleLicenseDate = carInfo.value['注册日期']
  drawerForm.value.dealCarPassengerCount = carInfo.value['核定载人数']
  drawerForm.value.dealCarTotalWeight = carInfo.value['整备质量']
  drawerForm.value.mileage = carInfo.value.mileage ? carInfo.value.mileage : ''
  drawerForm.value.dealCarIsNewenergy = carInfo.value['动力电池']
  drawerForm.value.dealCarEngineCode = carInfo.value['发动机号码']
  if (carInfo.value.外廓尺寸 !== '' && carInfo.value.外廓尺寸) {
    let size = (carInfo.value.外廓尺寸.split('X'))
    drawerForm.value.long = size[0]
    drawerForm.value.wide = size[1]
    drawerForm.value.height = `${parseInt(size[2])}`
  } else {
    drawerForm.value.long = ' '
    drawerForm.value.wide = ''
    drawerForm.value.height = ''
  }

}
//表单规则
const drawerRules = ref({
  ownerName: [{ required: true, message: '请输入归属人信息', trigger: 'blur' }],
  idCard: [{ required: true, message: '请输入证件信息', trigger: 'blur' }],
  ownerPhone: [{ required: true, message: '请输入手机号码', trigger: 'blur' }],
  // addressCode: [{ required: true, message: '请输入邮政编码', trigger: 'blur' }],
  companyAddress: [{ required: true, message: '请输入公司地址', trigger: 'blur' }],
  licensePlate: [{ required: true, message: '请输入车牌号', trigger: 'blur' }],
  carVin: [{ required: true, message: '请输入车辆识别代号', trigger: 'blur' }],
  confirmVin: [{ required: true, message: '请确认车辆识别代号', trigger: 'blur' }],
  usePowerCategory: [{ required: true, message: '请选择动力类别', trigger: 'blur' }],
  useNature: [{ required: true, message: '请选择使用性质', trigger: 'blur' }],
  brand: [{ required: true, message: '请输入车辆品牌', trigger: 'blur' }],
  dealCarSeriaName: [{ required: true, message: '请输入车辆型号 例如：（MR7161A）', trigger: 'blur' }],
  dealCarVehicleLicenseDate: [{ required: true, message: '请输入登记日期', trigger: 'blur' }],
  dealCarPassengerCount: [{ required: true, message: '请输入核定载客数', trigger: 'blur' }],
  dealCarTotalWeight: [{ required: true, message: '请输入整备质量', trigger: 'blur' }],
})


//使用性质options
const natureList = ref([{
  name: '农村客运(营运)',
  value: 'VILLAGEBUS'
}, {
  name: '城市公交(营运)',
  value: 'CITYBUS'
}, {
  name: '出租客运(营运)',
  value: 'TAXY'
}, {
  name: '旅游客运(营运)',
  value: 'TRAVEL'
}, {
  name: '营运其他(营运)',
  value: 'OTHERS'
}, {
  name: '危化品运输(营运)',
  value: 'DANGER'
}, {
  name: '货运(营运)',
  value: 'HY'
}, {
  name: '公路客运(营运)',
  value: 'GLKY'
}, {
  name: '非营运',
  value: 'NOOTHERS'
}, {
  name: '公交客运（ 营运）',
  value: 'GJKYYY'
}, {
  name: '租赁（ 营运）',
  value: 'ZLYY'
}, {
  name: '警用（ 非营运）',
  value: 'JYFYY'
}, {
  name: '消防（ 非营运）',
  value: 'XFFYY'
}, {
  name: '救护（ 非营运）',
  value: 'JHFYY'
}, {
  name: '工程救险（ 非营运）',
  value: 'GCJXFYY'
}, {
  name: '营转非（ 非营运）',
  value: 'YZFFYY'
}, {
  name: '出租转非（ 非营运）',
  value: 'CZZFFYY'
}, {
  name: '教练（ 营运）',
  value: 'JLYY'
}, {
  name: '运送学生',
  value: 'YSXS'
}, {
  name: '场内车',
  value: 'CNC'
}, {
  name: '编外车',
  value: 'BWC'
}, {
  name: '逾期车',
  value: 'YQC'
}])
//动力类别
const powerCategory = ref([
  { name: "汽油", value: "PETROL" },
  { name: "柴油", value: "DIESEL" },
  { name: "煤油", value: "COAL" },
  { name: "增程式电动汽车", value: "NEW2" },
  { name: "节能汽车", value: "NEW5" },
  { name: "替代燃料汽车", value: "NEW6" },
  { name: "无动力", value: "NONE" },
  { name: "纯电动", value: "NEW1" },
  { name: "插电式混合动力汽车", value: "NEW3" },
  { name: "燃料电池电动", value: "NEW4" }
])
const changeValue = ref<string>('')
const handleSeChange = (val: any) => {
  let name = natureList.value.filter((item) => item.value === val)
  changeValue.value = name[0].name
}
const powerCategoryValue = ref<string>('')
const handlePowerCategory = (val: any) => {
  let name = powerCategory.value.filter((item) => item.value === val)
  powerCategoryValue.value = name[0].name
}
watch([() => drawerForm.value.usePowerCategory, () => drawerForm.value.useNature], ([value1, value2]) => {
  if (value1 && value2) {
    powerCategoryValue.value = powerCategory.value.filter((item) => item.value === value1)[0].name
    changeValue.value = natureList.value.filter((item) => item.value === value2)[0].name
  }
}, {
  immediate: true,
})

const ruleFormRef = ref()
const handleSave = async () => {
  await ruleFormRef.value.validate(async (valid: boolean) => {
    if (valid) {
      let data = {
        orderDetail: {
          phone: drawerForm.value.ownerPhone
        },
        scrapCar: {
          id: changeItemId.value,
          carInfo: {
            "所有人": drawerForm.value.ownerName,
            "住址": drawerForm.value.companyAddress,
            "车辆识别代号": drawerForm.value.carVin,
            "号牌号码": drawerForm.value.licensePlate,
            "动力类型": powerCategoryValue.value,
            "动力类型Val": drawerForm.value.usePowerCategory,
            "身份证号码": drawerForm.value.idCard,
            "品牌": drawerForm.value.brand,
            "型号": drawerForm.value.dealCarSeriaName,
            // 动力类型:,
            "车辆类型": drawerForm.value.dealCarType,
            "使用性质Val": drawerForm.value.useNature,
            "使用性质": changeValue.value,
            "注册日期": drawerForm.value.dealCarVehicleLicenseDate,
            "核定载人数": drawerForm.value.dealCarPassengerCount,
            "核定载质量": drawerForm.value.dealCarTotalWeight,
            "整备质量": drawerForm.value.dealCarTotalWeight,
            "外廓尺寸": `${drawerForm.value.long}X${drawerForm.value.wide}X${drawerForm.value.height}`,
            "品牌型号": drawerForm.value.brandType,
            "mileage": drawerForm.value.mileage,
            "动力电池": drawerForm.value.dealCarIsNewenergy,
            "发动机号码": drawerForm.value.dealCarEngineCode
          }
        }
      }
      let result = await RequestVehicleInput(data)
      if (result.code === 0 && result.success) {
        ElMessage.success(result.msg)
        changeDrawer.value = false
        getData()
      } else {
        ElMessage.error(result.msg)
      }
    } else {
      console.log('error submit!!');
      return false;
    }
  });
}

</script>

<style scoped lang="scss">
::v-deep .el-step__icon {
  width: 20px;
  height: 20px;
  font-size: 12px;
  text-align: center;
}

::v-deep .el-step__title {
  font-size: 12px;
  line-height: 30px;
}

.rechargeType_li_hover {
  color: #fff;
  background-color: #116cf8;
  user-select: none;
  cursor: pointer;
  width: 32%;
  padding: 1rem 0;
  text-align: center;
  border-radius: 0.625rem;
}

.recharge {
  width: 100%;
  height: 100%;
  border-radius: 1rem;
  position: absolute;
  top: 0;
  left: 0;

  .left {
    width: 40%;
    height: 100%;
    border-radius: 1rem 0 0 1rem;
    background: url("../../../assets/images/bg_Recharge.png") no-repeat left;
    background-size: cover;
  }

  .right {
    flex: 1;
    height: 100%;
    border-radius: 0 1rem 1rem 0;
    background: linear-gradient(180deg, #ffffff 0%, #ecf5ff 1%, #ffffff 100%);

    .rechargeType {
      .rechargeType_li {
        user-select: none;
        cursor: pointer;
        width: 32%;
        padding: 1rem 0;
        text-align: center;
        color: #333333;
        background-color: #fff;
        border-radius: 0.625rem;

        &:hover {
          color: #fff;
          background-color: #116cf8;
          transition: 500ms;
        }
      }
    }

    .rechargeMoney_li_hover {
      width: 32%;
      padding: 1rem 0;
      // margin-bottom: 0.625rem;
      margin-top: 0.625rem;
      background-color: red;
      text-align: center;
      background: #e1f0ff;
      border-radius: 0.625rem 0.625rem 0.625rem 0.625rem;
      border: 0.0625rem solid #116cf8;
      user-select: none;
      cursor: pointer;
      transition: 500ms;

      p {
        font-size: 0.75rem;
        font-weight: 400;
        color: #333333;

        &:first-child {
          font-size: 1.25rem;
          font-weight: 600;
          color: #116cf8;
          margin-bottom: 0.625rem;

          span {
            font-size: 0.875rem;
            color: #116cf8;
          }
        }
      }
    }

    .rechargeMoney {
      .rechargeMoney_li {
        width: 32%;
        user-select: none;
        cursor: pointer;
        background: #ffffff;
        box-shadow: 0rem 0.25rem 0.625rem 0rem rgba(226, 234, 243, 0.3);
        border-radius: 0.625rem 0.625rem 0.625rem 0.625rem;
        opacity: 1;
        text-align: center;
        padding: 1rem;
        // margin-bottom: 0.625rem;
        border: 0.0625rem solid #ffffff;
        margin-top: 0.625rem;

        p {
          font-size: 0.75rem;
          font-weight: 400;
          color: #b2b2b2;

          &:first-child {
            font-size: 1.25rem;
            font-weight: 600;
            color: #333333;
            margin-bottom: 0.625rem;

            span {
              font-size: 0.875rem;
              color: #333333;
            }
          }
        }

        &:hover {
          background-color: red;
          text-align: center;
          background: #e1f0ff;
          border-radius: 0.625rem 0.625rem 0.625rem 0.625rem;
          border: 0.0625rem solid #116cf8;
          user-select: none;
          cursor: pointer;
          transition: 500ms;

          p {
            font-size: 0.75rem;
            font-weight: 400;
            color: #333333;

            &:first-child {
              font-size: 1.25rem;
              font-weight: 600;
              color: #116cf8;
              margin-bottom: 0.625rem;

              span {
                font-size: 0.875rem;
                color: #116cf8;
              }
            }
          }
        }
      }
    }
  }
}

.part {
  background-color: #f5f7fb;
  width: 100%;
  height: 1.875rem;
  line-height: 1.875rem;
  padding-left: 0.625rem;
}

.main {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;

  //box-shadow: 0 0 12px #0000000d;
  .cyr-flex {
    display: flex;
    flex: 1;
    flex-direction: column;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding: 20px;
    overflow-x: hidden;
    background-color: var(--el-bg-color);
    border-radius: 6px;
    box-shadow: 0 0 12px #0000000d;
  }

  .top {
    width: 100%;
    padding: 20px 20px 0;
    background-color: #fff;
    border-radius: 6px;
  }

  .content {
    width: 100%;
    background-color: #fff;
  }
}

/* 弹出框样式 */
::v-deep .el-overlay {
  .el-dialog__header {
    background-color: #116cf8;
    margin-right: 0 !important;

    .el-icon svg {
      color: #fff;
    }
  }

  .el-dialog__title {
    color: #fff;
  }
}

::v-deep .imgVisible {
  .el-dialog__body {
    padding: 0;
  }

  .el-icon svg {
    opacity: 0;
  }

  .el-dialog__header {
    padding: 0 !important;
    margin: 0 !important;
  }
}

.carImg {
  width: 4.375rem;
  height: 4.375rem;
  margin-right: 0.625rem;
  border-radius: 0.25rem;
}

::v-deep .el-upload--picture-card {
  --el-upload-picture-card-size: 3.75rem;
}

::v-deep .el-upload {
  .el-icon svg {
    color: #dcdfe6;
  }
}

::v-deep .el-upload-list--picture-card .el-upload-list__item-thumbnail {
  width: 3.75rem;
  height: 3.75rem;
  -o-object-fit: contain;
  object-fit: contain;
}

::v-deep .el-upload-list--picture-card .el-upload-list__item {
  width: 3.75rem;
  height: 3.75rem;
}

::v-deep .el-upload-list--picture-card .el-upload-list__item-actions {
  width: 3.75rem;
  height: 3.75rem;
}

//::v-deep .el-select {
//  width: 100% !important;
//}
</style>
